<template>
	<el-card>
		<el-row class="tac">
			<el-col :span="4">
				<el-menu default-active="2" class="zh-main-menu" @select="handleMenuSelect">
					<el-sub-menu v-for="item in state.menuList" :key="item.id" :index="item.id">
						<template #title>
							<!-- <el-icon><location /></el-icon> -->
							<span>{{ item.title }}({{ item.number }})</span>
						</template>
						<el-menu-item v-for="child in item.children" :key="child.id" :index="child.id"> {{ child.title }}({{ child.number }}) </el-menu-item>
					</el-sub-menu>
				</el-menu>
			</el-col>
			<el-col :span="19" style="margin-left: 20px">
				<el-card class="layout-query">
					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search()">
						<el-form-item label="项目名称">
							<el-input></el-input>
						</el-form-item>
						<el-form-item label="分配状态">
							<el-select placeholder="请选择" style="width: 100%">
								<el-option v-for="item in optionList1" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="管理账号">
							<el-select placeholder="请选择" style="width: 100%">
								<el-option v-for="item in optionList2" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="立项时间">
							<el-date-picker
								v-model="state.queryForm.time"
								type="datetimerange"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								:picker-options="pickerOptions"
							>
							</el-date-picker>
						</el-form-item>
						<el-form-item label="项目状态">
							<el-select placeholder="请选择" style="width: 100%">
								<el-option v-for="item in optionList1" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button icon="Search" type="primary" @click="search()">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button icon="RefreshRight" @click="reset()">重置</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card>
					<el-table v-loading="state.dataListLoading" :data="state.dataList" stripe class="layout-table" @selection-change="selectionChangeHandle">
						<el-table-column type="index" label="序号" header-align="center" align="center" width="55"></el-table-column>
						<el-table-column prop="standardProjectName" label="项目名称" header-align="center" align="center"></el-table-column>
						<el-table-column prop="editorUnitName" label="项目状态" header-align="center" align="center"></el-table-column>
						<el-table-column prop="contacts" label="项目类型(标准/前瞻性项目)" header-align="center" align="center"></el-table-column>
						<el-table-column prop="projectFunding" label="立项时间" header-align="center" align="center"></el-table-column>
						<el-table-column prop="applyYear" label="角色A" header-align="center" align="center"></el-table-column>
						<el-table-column prop="applyStage" label="角色B" header-align="center" align="center">
							<template #default="scope">
								{{ scope.row }}
							</template>
						</el-table-column>
						<el-table-column prop="applyYear" label="分配状态" header-align="center" align="center"></el-table-column>
					</el-table>
					<el-pagination
						:current-page="state.queryForm.pageNum"
						:page-size="state.queryForm.pageSize"
						:total="state.total"
						layout="total, sizes, prev, pager, next, jumper"
						@size-change="sizeChangeHandle"
						@current-change="currentChangeHandle"
					>
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>
	</el-card>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const state = reactive({
	menuList: [
		{
			title: '标准科人员1',
			number: 1,
			id: '1',
			children: [
				{
					id: '1.1',
					title: '项目1.1',
					number: 1
				},
				{
					id: '1.2',
					title: '项目1.2',
					number: 2
				}
			]
		},
		{
			title: '标准科人员2',
			number: 2,
			id: '2',
			children: [
				{
					id: '2.1',
					title: '项目2.1',
					number: 1
				},
				{
					id: '2.2',
					title: '项目2.2',
					number: 2
				}
			]
		},
		{
			title: '标准科人员3',
			number: 3,
			id: '3',
			children: [
				{
					id: '3.1',
					title: '项目3.1',
					number: 3
				},
				{
					id: '3.2',
					title: '项目3.2',
					number: 3
				}
			]
		}
	],
	queryForm: {
		applyStatus: '',
		account: '',
		time: '',
		pageNum: 1,
		pageSize: 10
	},
	dataListLoading: false,
	total: 100,
	dataList: []
})
const pickerOptions = ref({
	disabledDate(time) {
		// 禁用所有过去的日期，只允许选择当前日期及以后的时间
		return time.getTime() < Date.now()
	},
	selectableRange: '00:00:00 - 23:59:59' // 限制时间选择范围为00:00:00到23:59:59
})

const optionList1 = [
	{
		value: '0',
		label: '全部'
	},
	{
		value: '1',
		label: '已分配'
	},
	{
		value: '2',
		label: '未分配'
	}
]

const optionList2 = [
	{
		value: '0',
		label: '管理1'
	},
	{
		value: '1',
		label: '管理2'
	},
	{
		value: '2',
		label: '管理3'
	}
]

const checkindex = ref('1')
const handleMenuSelect = (item: string) => {
	console.log('menu item: ', item)
	checkindex.value = item
}
const getDataList = async () => {}
const search = () => {
	state.queryForm.pageNum = 1
	getDataList()
}

const reset = () => {
	state.queryForm.pageNum = 1
	state.queryForm.pageSize = 10
	getDataList()
}
const selectionChangeHandle = () => {}
const sizeChangeHandle = (e: number) => {
	state.queryForm.pageSize = e
	state.queryForm.pageNum = 1
	getDataList()
}
const currentChangeHandle = (e: number) => {
	state.queryForm.pageNum = e
	getDataList()
}
</script>
<style scoped>
.zh-main-menu {
	border: 1px solid #ddd;
	border-right: 1px solid #ddd !important;
}
</style>
<style>
/* 菜单选中 */
.zh-main-menu .el-sub-menu.is-active {
	background-color: #409eff;
}

.zh-main-menu .el-sub-menu.is-active .el-sub-menu__title {
	color: white !important;
}

.zh-main-menu .el-sub-menu:hover {
	background-color: #409eff;
}

.zh-main-menu .el-sub-menu:hover .el-sub-menu__title {
	color: white !important;
}
</style>
